:host {
  display: block;
  overflow: hidden;
  font-size: var(--steps-base-font-size, 13px);
}

::slotted(quark-step) {
  position: relative;
}

::slotted(quark-step)::before {
  width: 1px;
  height: 100%;
  background: #909ca4;
  position: absolute;
  box-sizing: border-box;
  content: " ";
  bottom: 0;
  left: 1em;
}

:host(:not([direction="vertical"])) ::slotted(quark-step)::before {
  width: 100%;
  height: 1px;
  top: 1em;
  left: 60%;
}

::slotted(quark-step[status="done"])::before {
  background: var(--quark-theme-color, quark-primaryColor);
}

::slotted(quark-step:last-child)::before {
  display: none;
}

.quark-steps-horizontal {
  display: flex;
}
